<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上传接口文档</title>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                    <div class="layui-upload-drag" id="upload">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="uploadBtn">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
        </div>
    </div>
</form>
<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script th:inline="javascript">
    const projectId = [[${projectId}]];

    layui.use(['form','jquery','upload'],function(){
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;


        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            ,url: '/api/project/upload/'+projectId //上传接口
            ,accept: 'file'
            // v1版本
            //,exts: 'pdf'
            // v2版本
            ,exts: 'pdf|doc|docx'
            ,auto: false
            ,bindAction: '#uploadBtn'
            ,drag: true
            ,done: function(result){
                //上传完毕回调
                if(result.code=="1000") {
                    layer.msg(result.data, {icon: 1, time: 1000}, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("project-table");
                    });
                }
            }
            ,error: function(result){
                //请求异常回调
                layer.msg(result.data,{icon:2,time:1000});
            }
        });

    })
</script>
<script>
</script>
</body>
</html>